<template>
  <el-tag  v-if="itemData" :effect="effect" :size="size" :type="itemData.tagType ? itemData.tagType : 'info'">
    <span v-if="circle && itemData.tagType" :class="['circle', itemData.tagType]"/>{{ itemData.label }}
  </el-tag>
  <el-tag v-else :effect="effect" :size="size" :type="defaultType ? defaultType : 'info'">
    <span v-if="circle && defaultType" :class="['circle', defaultType]"/>{{ defaultLabel ? defaultLabel : '未知 ' + modelValue }}
  </el-tag>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { dictTypeMap } from '@/utils/global-dict.ts';

const props = defineProps({
  modelValue: [Number, String, Boolean],
  dictType: {
    type: String,
    required: true
  },
  size: {
    type: String,
    default: ''
  },
  effect: {
    type: String,
  },
  defaultLabel: {
    type: String,
    default: ''
  },
  defaultType: {
    type: String,
    default: 'danger'
  },
  circle: {
    type: Boolean,
    default: true
  }
});

const itemData = computed(() => {
  let dataList = dictTypeMap[props.dictType] || []
  if (dataList && dataList.length > 0) {
    let itemList = dataList.filter(item => item.value == props.modelValue)
    return itemList[0] || null
  }
  return null
});
</script>

<style lang="scss" scoped>

</style>
